<template>
  <div class="search-choose-container nav-bar-top">
    <!-- 搜索 -->
    <div class="search-bar">
      <van-icon class="back" name="arrow-left" size="20" @click="$router.back()"/>
      <van-search v-model="searchContent" ref="search" autofocus class="search-box" placeholder="请输入搜索关键词" />
      <span class="search-btn" @click="search">搜索</span>
    </div>
    <van-cell class="bold" title="历史搜索">
      <div slot="default" @click="() => this.deleteFlag = !this.deleteFlag">
        {{!this.deleteFlag ? '编辑' : '完成'}}
      </div>
    </van-cell>
    <div class="history-list">
      <van-tag @click="historyClick(historySearch)" v-for="(historySearch, index) in historySearchList" :key="index" plain :closeable="deleteFlag">{{historySearch}}</van-tag>
    </div>
    <van-cell class="bold" title="热门搜索" value="" />
    <div class="hot-list">
      <van-cell @click="hotClick(hotSearch)" v-for="(hotSearch, index) in hotSearchList" :key="index" :title="hotSearch"/>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import constants from '@/config/constants'

export default {
  name: 'searchChoose',
  data () {
    return {
      /* 编辑状态 */
      deleteFlag: false,
      /* 输入关键字 */
      searchContent: '',
      historySearchList: [
        '1212', '3434', 'k30s', 'iphone11'
      ],
      hotSearchList: [
        '手机', '官方', '电饭锅'
      ]
    }
  },
  computed: {
    ...mapState(['searchKeyword'])
  },
  created () {
    this.searchContent = this.searchKeyword;
  },
  methods: {
    /* 搜索 */
    search () {
      this.$store.commit(constants.STORE.UPDATE_SEARCH_KEYWORD, this.searchContent);
      this.$router.back();
    },
    /* 选中历史搜索 */
    historyClick (val) {
      if(!this.deleteFlag){
        this.searchContent = val;
        this.search();
      }else{
        //删除历史搜索记录
        // TODO
      }
    },
    /* 选中热门搜索 */
    hotClick (val) {
      this.searchContent = val;
      this.search();
    }
  }
}
</script>

<style lang="scss">
.search-choose-container{
  .search-bar{
    background-color: #fff;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 55px;
    width: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    .back{
      margin-left: 10px;
      color: #333;
    }
    .search-box{
      flex: 1;
      .van-search__content{
        border-radius: 5px;
      }
    }
    .search-btn{
      margin-right: 15px;
      font-size: 15px;
      color: #333;
    }
  }
  .history-list{
    padding: 10px 15px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    .van-tag{
      border-radius: 5px;
      font-size: 14px;
      margin-right: 15px;
      margin-bottom: 15px;
      color: #e9b461;
      padding: 8px 10px;
      background: unset !important;
    }
    .van-tag:last-child{
    }
  }
}
</style>
